<template>
  <div id="olContainer"></div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer, Image } from 'ol/layer'
import { WMTS, TileWMS, ImageWMS } from 'ol/source'
import { get } from 'ol/proj'
import { getWidth, getTopLeft, getCenter } from 'ol/extent'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import TileGrid from 'ol/tilegrid/TileGrid'

export default {
  data() {
    return {
      kriging: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const projection = get('EPSG:4326')
      this.map = new Map({
        target: 'olContainer',
        layers: [this.loadTDTLayer(), this.loadTDTLayer('SL', 1)],
        view: new View({
          center: [119.14057927312456, 25.091309614896208],
          projection: projection,
          zoom: 3,
          maxZoom: 17,
          minZoom: 1
        })
      })
      this.$emit('olMapAction', this.map)
      // this.map.on('rendercomplete', () => {
      //   console.log('地图渲染完成！')
      //   this.$emit('olMapAction', this.map)
      // })
    },
    loadTDTLayer(layerType = 'SL', idx = 0) {
      const projection = get('EPSG:4326')
      const projectionExtent = projection.getExtent()
      const size = getWidth(projectionExtent) / 256

      // 以下天地图
      const resolutions = []
      for (let z = 2; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z)
      }
      const TIANDI_KEY = 'd7ce97f4d9ce9bb20fe0193e53e6b18f'
      // 对应的值是固定的
      const layerTypeMap = {
        SL: ['vec', 'cva'], // [矢量底图, 矢量注记]
        YX: ['img', 'cia'], // [影像底图, 影像注记]
        DX: ['ter', 'cta'] // [地形晕渲, 地形注记]
      }
      // c: 经纬度投影 w: 球面墨卡托投影
      const matrixSet = 'c'
      return new TileLayer({
        source: new WMTS({
          url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][idx]}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
          layer: layerTypeMap[layerType][idx],
          matrixSet: matrixSet,
          style: 'default',
          crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
          format: 'tiles',
          wrapX: true,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: [
              '0',
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17'
            ]
          })
        })
      })
    },
    loadWTMS() {
      const projection = get('EPSG:3857')
      const projectionExtent = projection.getExtent()
      const size = getWidth(projectionExtent) / 256
      const resolutions = new Array(19)
      const matrixIds = new Array(19)
      for (let z = 0; z < 13; ++z) {
        resolutions[z] = size / Math.pow(2, z)
        matrixIds[z] = 'EPSG:3857_china_image:' + z
      }
      var wmtsSource = new WMTS({
        url: 'http://192.168.56.128:8100/geowebcache/service/wmts',
        layer: 'china_image',
        matrixSet: 'EPSG:3857_china_image',
        format: 'image/jpeg', // 默认：'image/jpeg'
        projection: projection,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: matrixIds
        }),
        style: '',
        wrapX: true
      })

      var wmtsService = new TileLayer({
        source: wmtsSource
      })
      return wmtsService
    },
    loadWMS() {
      const projection = get('EPSG:3857')
      const projectionExtent = projection.getExtent()
      const size = getWidth(projectionExtent) / 256
      const resolutions = new Array(12)
      for (let z = 0; z < 13; ++z) {
        resolutions[z] = size / Math.pow(2, z)
      }
      return new TileLayer({
        source: new TileWMS({
          ratio: 1,
          url: 'http://192.168.56.128:8100/geowebcache/service/wms',
          params: {
            FORMAT: 'image/jpeg',
            VERSION: '1.1.0',
            STYLES: '',
            LAYERS: 'china_image',
            exceptions: 'application/vnd.ogc.se_inimage',
            WIDTH: 256,
            HEIGHT: 256
          },
          tileGrid: new TileGrid({
            // resolution和conf.xml中保持一致
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            tileSize: [256, 256]
            // origin: [-20037508.3427892, 20037508.3430388]
          })
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
#olContainer {
  width: 100%;
  height: 100%;
  // width: 800px;
  // height: 800px;
}
#openMap {
  background: #fff;
}
#canvas {
  position: absolute;
  left: 3%;
  bottom: 2%;
  z-index: 99;
}
</style>
